<template>
  <div class="search-box">
    <input type="text" class="search-input" placeholder="搜索喜欢的作者" @keydown.enter="onSearch" v-model="keyword"/>
    <i class="search-icon" @click="onSearch"></i>
  </div>
</template>

<script lang="ts">
import { reactive, toRefs } from 'vue';
import mitt from 'mitt';
export const emitter = mitt();
export default {
  setup() {
    const state = reactive({
        keyword:""
    })
    const refState = toRefs(state);
    const onSearch = () => {
        if(!state.keyword)return alert('请输入你喜欢的作者名!');
        emitter.emit('on-search',state.keyword);
    }
    return {
        ...refState,
        onSearch
    };
  },
};
</script>

<style lang="less" scoped>
.search-box {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 0 15px;
  .search-input {
    border: none;
    box-sizing: border-box;
    padding: 5px 30px 5px 5px;
    height: 33px;
    width: 90%;
    background-image: url("");
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    outline: none;
  }
  .search-icon {
    width: 20px;
    height: 20px;
    cursor: pointer;
    position: absolute;
    right: 23px;
    background-image: url("");
    background-repeat: no-repeat;
    background-size: contain;
  }
}
@media only screen and (min-width: 960px) {
  .search-box {
    .search-icon {
      width: 22px;
      height: 25px;
      right: 65px;
    }
    .search-input {
      height: 45px;
      padding: 5px 12px;
    }
  }
}
</style>